<template>
  <div class="text-editor" ref="editor">
  </div>
</template>

<script>
// 引入上传图片接口
import { uploadCourseImg } from '@/services/course'
// 引⼊富⽂本编辑器
import E from 'wangeditor'
export default {
  name: 'TextEditor',
  mounted () {
    // 初始化富文本编辑器
    this.initEditor()
  },
  data () {
    return {
      editor: null,
      // 标记编辑的数据是否加载完毕
      isLoaded: false
    }
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    initEditor () {
      // 创建富⽂本编辑器实例
      const editor = new E(this.$refs.editor)
      // 在初始化之前使用  onchange回调⽤于在内容改变时触发。
      // 配置回调函数onchange时，利用参数接受到最新的内容然后将内容传递给父组件
      editor.config.onchange = function (value) {
        // value 为输⼊的内容，通过⾃定义事件传出即可 (注意 this 指向)
        // 通过组件⾃定义事件传出给⽗组件的 v-model 绑定。
        this.$emit('input', value)
      }
      // 配置自定义图片的上传的功能
      editor.config.customUploadImg = async function (resultFiles, insertImgFn) {
        const fd = new FormData()
        fd.append('file', resultFiles[0])
        const { data } = await uploadCourseImg(fd)
        // console.log(data)
        if (data.code === '000000') {
        // data.data.name 是服务端相应的是图片上传后的线上地址
        // 通过insertImgFn方法传回给富文本编辑器进行展示
          insertImgFn(data.data.name)
        }
      }
      // 回调必须设置在 editor.create() 前，否则编辑器已经创建完毕，设置⽆效。否则编辑器已经创建完毕，设置⽆效。
      // 初始化富⽂本编辑器的操作
      editor.create()
      // editor富文本编辑器的方法重新设置（接受父组件的文本）编辑内容
      editor.txt.html(this.value)
      // 将富⽂本编辑器实例保存给 this 以便在 watch 中操作
      this.editor = editor
    }
  },
  watch: {
    // 编辑数据加载成功后，为富⽂本编辑器更新初始内容即可
    value () {
      if (this.isLoaded === false) {
        this.editor.txt.html(this.value)
        this.isLoaded = true
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
